<template>
  <div class="menu">
    <h2 v-if="!collapse" class="title">vue3_ts_coms</h2>
    <el-menu
      default-active="2"
      class="el-menu-vertical-demo"
      background-color="#2B2F3E"
      text-color="#fff"
      @open="handleOpen"
      @close="handleClose"
      active-text-color="#ffd04b"
      :collapse="collapse"
      router
      @select="handleSelect"
    >
      <template v-for="item in $store.state.login.userMenus">
        <template v-if="item.type === 1">
          <el-sub-menu :index="item.url" :key="item.id">
            <template #title>
              <i v-if="item.icon" :class="item.icon"></i>
              <span>{{ item.name }}</span>
            </template>
            <template v-for="subItem in item.children" :key="subItem.id">
              <el-menu-item :index="subItem.url">
                <i v-if="subItem.icon" :class="subItem.icon"></i>
                <span>{{ subItem.name }}</span>
              </el-menu-item>
            </template>
          </el-sub-menu>
        </template>
        <template v-else-if="item.type === 2">
          <el-menu-item :index="item.url" :key="item.id">
            <i v-if="item.icon" :class="item.icon"></i>
            <span>{{ item.name }}</span>
          </el-menu-item>
        </template>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts">
import { useStore } from "vuex";
import { defineComponent, computed, ref } from "vue";
export default defineComponent({
  name: "menu",
  components: {},
  props: {
    collapse: {
      type: Boolean,
      default: false,
    },
  },
  setup(props) {
    const store = useStore();
    const handleSelect = (menuItem: any) => {
      const menus = store.state.login.userMenus;
      // console.log(menuItem.split("/"));  ["", "main", "analysis", "overview"]
      // 一级面包屑index
      const parentIndex = menus.findIndex(
        (item: any) =>
          item.url === `/${menuItem.split("/")[1]}/${menuItem.split("/")[2]}`
      );
      // 二级面包屑index
      const subIndex = menus[parentIndex].children.findIndex(
        (item: any) => menuItem === item.url
      );
      const headerTitle =
        menus[parentIndex].name +
        "/" +
        menus[parentIndex].children[subIndex].name;

      // console.log(headerTitle);
      store.commit("login/changeHeaderTitle", headerTitle);
    };
    return { handleSelect };
  },
});
</script>

<style lang="less" scoped>
.el-menu-item.is-active {
  background: #021326 !important;
}
.el-menu-vertical-demo:not(.el-menu--collapse) {
  width: 210px; //宽度自己掌握
  height: 100%;
}
.menu {
  h2.title {
    color: #fff;
    padding: 10px;
  }
}

.el-menu {
  border-right: none;
  height: 100%;
}
</style>
